iT邦幫忙

2023 iThome 鐵人賽

DAY 1
3
SideProject30

營養師不開菜單要用 Next.js 13 寫全端系列 第 1

營養師不開菜單的第一天 - 為什麼要做 Link In Bio Tool?

  • 分享至 

  • xImage
  •  

本系列文已改編出版為『營養師不開菜單後的 Next.js 全端轉職攻略:從專案規劃、畫面設計、資安到 SEO,挑戰一人 Side Project (iThome鐵人賽系列書)』希望能夠帶給還在轉職路中或是剛轉職的朋友一點參考與幫助。
天瓏書局購買網址:請點我

https://ithelp.ithome.com.tw/upload/images/20230915/20152073jZDgzxfbOR.png

前言

一年半前,我還是個每天在廚房走跳的營養師,除了跟廚師或阿姨打交道,就是跟廠商吵架,再接著對老師家長畢恭畢敬,職業生涯中完全沒想過這輩子會當前端工程師。在因緣際會以及不斷被慫恿洗腦下,我覺得牙一咬好像真的可以成功。所以從自學到轉職,從中獲得很多樂趣以及成就感,對於博大精深的知識感到渴望與興奮。

動機

這次除了有幸跟兩位大神組隊參賽,也鼓起勇氣想為自己挑戰一次,主要是去年 Next.js 13 版本發佈之後在社群上造成大轟動,對於 React 使用者想自己完成一個從 0 到 1 的全端 Side Project 是非常友善的,從開始接觸 Next.js 之後也跟著 YouTube 的實戰做了幾個作品,這次,想從頭到尾自己完成!

不過這次 Side Project 的主題發想其實跟營養師沒有太大的相關,本身有因為興趣經營 Instagram 以及臉書專頁,在社群發達的時代,Link in Bio 這種對於行銷或宣傳性質高的服務已經非常盛行了,但有時候看著那些付費的功能,身為免費仔那種看得到吃不到的感覺,真是巴不得自己直接建一個!

所以這三十天的系列文會將初階需求、畫面設計、資料庫欄位設計、前端實作及工具使用、後端功能實作到優化及部署,一天一天的完成 Link in Bio 專案!

Roadmap

https://ithelp.ithome.com.tw/upload/images/20230916/201520734TNjfAlyts.png

目錄

前三天以前言及專案介紹以及整體架構作為開章

第四到七天,以 Next.js 作為專案框架,進行大方向功能的介紹。

第八天開始,將根據專案中所使用的套件,逐一解釋選用它們的原因,以及在專案中的具體實作方式。

完成套件的實作後,我們將深入探討畫面設計、前端以及後端的關鍵實作細節

專案大致功能完成,緊接著是優化以及部署,最後也會針對專案的發展性及未來功能擴展做相關計畫

結尾

這次的實作挑戰及套件工具介紹,皆是基於我廣泛搜集的資訊,再加上個人在專案中或是工作上遇到的坑後,加入一點小小心得分享,內文中大該有 95 % 會以實際的專案 code 作為範例,而剩下的 5 % 則是沒有實作到,但也希望分享給讀者們的內容,如果有任何需改進或錯誤訊息,歡迎留言指教!也希望給菜逼八轉職仔一個鼓勵會更有前進的動力!

https://ithelp.ithome.com.tw/upload/images/20230916/2015207310xY1Hn5pK.png


下一篇
營養師不開菜單的第二天 - Link In Bio Tool 專案介紹
系列文
營養師不開菜單要用 Next.js 13 寫全端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
漢堡法師
iT邦新手 5 級 ‧ 2023-10-28 08:03:35

好讚追起來!

我要留言

立即登入留言